<template>
	<view class="t_back">
		<view class="t_top">
			<image class="t_chat" src="../../static/探索图标/消息.png"></image>
			<text @click="change_blod(0)" :id="index === 0 ? 't_bold' : ''">关注</text>
			<text @click="change_blod(1)" :id="index === 1 ? 't_bold' : ''">广场</text>
			<image class="t_select" src="../../static/探索图标/搜索.png"></image>
		</view>

		<view class="t_type">
			<text v-for="item,index in titList" @click="daindex = index" :class="daindex==index ? 'da' : ''"
				:key="item">{{item}}</text>
			<image src="../../static/探索图标/下拉.png"></image>
		</view>
		<view class="app">
			<waterfall-flow :list="list" @click="choose"></waterfall-flow>
		</view>
		<navigator url="/pages/fabu/fabu">
			<image @tap="fabu" src="../../static/探索图片/太空人.png" class="t_TKR" mode=""></image>
			<text class="t_fabu">去发布</text>
		</navigator>

	</view>

</template>

<script>
	// 瀑布流组件
	import WaterfallFlow from '../../components/nairenk-waterfall-flow/nairenk-waterfall-flow.vue';
	//promise封装请求数据
	import request from "../../components/promise/promise";


	export default {
		components: {
			WaterfallFlow
		},
		data() {
			return {
				value1: 1,
				value2: 2,
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
				options2: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
			daindex: 0,
				page: 1,
				start: 0,
				end: 0,
				list: [], // 列表
				index: 1,
				data: {},
				titList: ["推荐", "视频", "读书", "穿搭", "心理", "拍摄"]
		}
	},

	onReachBottom() {
			this.page++;
			this.getList();
		},
		methods: {
			//获取数据
			async getdata() {
				let {
					data
				} = await request({
					url: "http://47.93.162.7:3000/list"
				})
				// let {data} = await request({url:"http://localhost:3000/list"})
				this.data = data
				console.log(data, "数据")
				if (data.list.length > 0) {
					this.getList()
				}
			},
			// 选中
			choose(item) {
				// item 返回选中 JSON 对象
				uni.navigateTo({
					url: `/pages/tanXQ/tanXQ?item=` + encodeURIComponent(JSON.stringify(item)),
					animationType: 'pop-in',
					animationDuration: 200,
				})
			},
			// 模拟加载数据
			getList() {
				if (this.list.length < this.data.list.length) {
					uni.showLoading({
						title: '加载中...'
					})
					setTimeout(() => {
						this.end = this.page * 10;
						this.list = this.list.concat(this.data.list.slice(this.start, this.end));
						this.start = this.end;
						uni.hideLoading();
					}, 300)
				}
			},
			change_blod(index) {
				this.index = index
			},
		},
		mounted() {
			this.getdata()
		},
	}
</script>

<style scoped>
	.da {
		font-size: 32rpx;
		font-weight: 600;
	}

	/* 渐变样式 */
	.t_back {
		width: 100%;
		height: 40vh;
		background: linear-gradient(to right, #e6fafe, #fcf9ec, #fdfbf3);
		box-shadow: 1px 1px 1px 1px #e6fafe;
	}

	/* 顶部菜单 */
	.t_top {
		display: flex;
		justify-content: space-between;
		position: relative;
	}


	.t_chat {
		position: relative;
		left: 33rpx;
		top: 20rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.t_top text:nth-child(2) {
		position: relative;
		left: 50rpx;
		top: 40rpx;
		line-height: 30rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 30rpx;
		text-align: left;
		font-family: SourceHanSansSC-regular;
	}

	.t_top text:nth-child(3) {
		position: relative;
		right: 45rpx;
		top: 40rpx;
		line-height: 30rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 30rpx;
		text-align: left;
		font-family: SourceHanSansSC-regular;
	}

	.t_select {
		position: relative;
		right: 33rpx;
		top: 20rpx;
		width: 50rpx;
		height: 50rpx;
	}

	#t_bold {
		font-size: 40rpx;
		font-weight: 700;
		font-family: SourceHanSansSC-regular;
	}

	/* 类型样式 */
	.t_type {
		display: flex;
		justify-content: space-around;
		margin-top: 65rpx;
	}

	.t_type :nth-last-child(1) {
		width: 50rpx;
		height: 50rpx;
	}

	.t_TKR {
		position: fixed;
		width: 173rpx;
		height: 196rpx;
		right: 0rpx;
		bottom: 100rpx;
		background-color: rgba(255, 255, 255, 0);
	}

	.t_fabu {
		position: fixed;
		right: 40rpx;
		bottom: 160rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 36rpx;
		text-align: left;
		font-weight: 900;
		font-family: fantasy;
	}
</style>